<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      v-show="showSearch"
      :inline="true"
      label-width="88px"
    >
      <el-form-item
        label="年筛选"
        prop="accYear"
      >
        <el-date-picker
          v-model="queryParams.accYear"
          type="year"
          placeholder="请选择年份"
          format="YYYY"
          value-format="YYYY"
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item
        label="月筛选"
        prop="accYearMonth"
      >
        <el-date-picker
          v-model="queryParams.accYearMonth"
          type="month"
          placeholder="请选择月份"
          format="YYYY-MM"
          value-format="YYYY-MM"
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item
        label="日筛选"
        prop="accYearMonthDay"
      >
        <el-date-picker
          v-model="queryParams.accYearMonthDay"
          type="date"
          placeholder="请选择日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item
        label="商品类型"
        prop="goodsType"
      >
        <el-select
          v-model="queryParams.goodsType"
          placeholder="请选择商品类型"
          clearable
          style="width: 200px"
        >
          <el-option
            label="男装"
            value="男装"
          />
          <el-option
            label="女装"
            value="女装"
          />
          <el-option
            label="童装"
            value="童装"
          />
          <el-option
            label="运动装"
            value="运动装"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="Search"
          @click="handleQuery"
        >搜索</el-button>
        <el-button
          icon="Refresh"
          @click="resetQuery"
        >重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格数据 -->
    <el-table
      v-loading="loading"
      :data="statisticsList"
    >
      <el-table-column
        label="商品ID"
        prop="goodsId"
        width="100"
        align="center"
      />
      <el-table-column
        label="商品名称"
        prop="goodsName"
        :show-overflow-tooltip="true"
        width="200"
      />
      <el-table-column
        label="访问次数"
        prop="num"
        width="120"
        align="center"
      >
        <template #default="scope">
          <el-tag :type="scope.row.num > 10 ? 'success' : scope.row.num > 5 ? 'warning' : 'info'">
            {{ scope.row.num }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="访问热度"
        align="center"
        width="150"
      >
        <template #default="scope">
          <el-progress
            :percentage="getHeatPercentage(scope.row.num)"
            :color="getHeatColor(scope.row.num)"
            :stroke-width="20"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="统计时间"
        align="center"
        width="180"
      >
        <template #default>
          <span>{{ parseTime(new Date()) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="AccessStatistics">
import { getGoodsStatistics } from '@/api/statistics'
import { parseTime } from '@/utils/ruoyi'

const { proxy } = getCurrentInstance()

const statisticsList = ref([])
const loading = ref(true)
const showSearch = ref(true)
const total = ref(0)

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    accYear: undefined,
    accYearMonth: undefined,
    accYearMonthDay: undefined,
    goodsType: undefined
  }
})

const { queryParams } = toRefs(data)

/** 查询商品访问统计列表 */
function getList() {
  loading.value = true
  getGoodsStatistics(queryParams.value)
    .then((response) => {
      statisticsList.value = response.rows || []
      total.value = response.total || 0
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef')
  handleQuery()
}

/** 计算访问热度百分比 */
function getHeatPercentage(num) {
  const maxNum = Math.max(...statisticsList.value.map((item) => item.num))
  return maxNum > 0 ? Math.round((num / maxNum) * 100) : 0
}

/** 获取热度颜色 */
function getHeatColor(num) {
  if (num > 10) return '#67c23a'
  if (num > 5) return '#e6a23c'
  return '#909399'
}

getList()
</script>
